"use client"

import { Button } from "@/components/ui/button"
import type { Ranking } from "@/types/ranking"

interface RankingSidebarProps {
  rankings: Ranking[]
  selectedRanking: Ranking | null
  onRankingChange: (ranking: Ranking) => void
}

export function RankingSidebar({ rankings, selectedRanking, onRankingChange }: RankingSidebarProps) {
  return (
      <div className="w-64 flex-shrink-0">
        <h2 className="text-xl font-bold mb-4">排行榜</h2>
        <div className="space-y-1">
          {rankings.map((ranking) => (
              <Button
                  key={ranking.id}
                  variant={selectedRanking?.id === ranking.id ? "default" : "ghost"}
                  className="w-full justify-start"
                  onClick={() => onRankingChange(ranking)}
              >
                {ranking.name}
              </Button>
          ))}
        </div>
      </div>
  )
}

